<template>
  <div class="editor-wrapper">
    <vue-ueditor-wrap ref="ueditor" v-model="content" :config="config" @ready="ready" />
  </div>
</template>

<script>

import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  name: 'Editor',
  components: {
    VueUeditorWrap
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      // Authorization: `Bearer ${getToken()}`
      content: this.value,
      config: {
        // 相对路径
        UEDITOR_HOME_URL: '/UEditor/',
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度// 初始容器宽度
        initialFrameHeight: 300,
        initialFrameWidth: '100%',
        toolbars: [[
          'fullscreen', 'source', '|', 'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
          'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
          'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
          'directionalityltr', 'directionalityrtl', 'indent', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
          'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
          'simpleupload', 'insertimage', '|',
          'horizontal', 'date', 'time', 'spechars', 'snapscreen', '|',
          'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts'
        ]],
        // 不显示字数
        enableAutoSave: false, // 自动保存
        saveInterval: 2000,
        customDomain: false,
        sourceEditorFirst: false,
        autoSyncData: false,
        zIndex: 9999,
        // 上传图片路径,需要后台配置，否则控制台会报错。
        // 报错信息为 后台配置项返回格式出错，上传功能将不能正常使用！
        serverUrl: `${this.baseUrl}api/file/upload`
      }
    }
  },
  watch: {
    value(newValue) {
      this.$nextTick(() => {
        this.content = newValue
      })
    },
    content(newValue) {
      this.$nextTick(() => {
        this.$emit('input', newValue)
      })
    }
  },
  methods: {
    ready(instance) {
      this.editor = instance
    }
  }
}
</script>

<style>
</style>
